@import 'mod.css';
@import 'variable.css';

#mall_header .logo {
    background: url(../newimages/index-logo.gif) -5px 10px no-repeat;
}

.banner {
    clear: fix;
    w: 1180px;
    m: 0 auto;
}

.banner-left {
    w: 200px;
    bg: #7f7170;
    p: 24px 0 0px 20px;
    box-sizing: border-box;
    fl: left;
    a {
        c: #fff;
    }

    .banner-left-section {
        mb: 13px;
        a {
            float: left;
            text-decoration: none;
            &:hover {
                color: $bg;
            }
        }

        .title {

            fz: 16px;
            pos: relative;
            clear: fix;
            mb: 12px;
            .icon {
                mt: 1px;
                fl: left;
            }

            .icon-circel-link {
                pos: absolute;
                r: 16px;
                top: 1px;
                mr: 0;
            }
        }
        ul {
            pl: 26px;
            ofl: hidden;
            li {
                fl: left;
                mr: 13px;
                mb: 13px;
            }
        }
    }
}

.banner-middle {
    fl: left;
    bg: #f7f7f7;
    p: 0 10px;
    pos: relative;
    width: 780px;
    box-sizing: border-box;
}

.swiper-container {
    size: 760px 340px;
    ta: center;
    cursor: pointer;
    img {
        size: 760px 340px;
    }
    .swiper-button-prev {
        size: 30px 60px;
        bgp: 0px -126px;
        pos: absolute;
        l: 0;
        t: 50%;
        mt: -30px;
        z-index: 222;
        cursor: pointer;
        &:hover {
            bgp: -35px -128px;
        }
    }
    .swiper-button-next {
        size: 30px 60px;
        bgp: -1px -190px;
        pos: absolute;
        r: 0;
        t: 50%;
        mt: -30px;
        z-index: 222;
        cursor: pointer;
        &:hover {
            bgp: -36px -190px;
        }
    }
    .pagination-wrap {
        ta: center;
        pos: absolute;
        l: 0;
        b: 23px;
        w: 100%;
        z-index: 22;
    }
    .pagination {
        d: inline-block;
        h: 18px;
        border-radius: 8px;
        bg: #343131;
        lh: 18px;
        .swiper-pagination-switch {
            d: inline-block;
            size: 10px 10px;
            border-radius: 10px;
            bg: #9a9898;
            m: 0 6px;
            cursor: pointer;
            opacity: 1;
            filter: alpha(opacity=100);
        }
        .swiper-active-switch {

            /*bg: #b94444!important;*/
            background: red;
        }
    }
}

.banner-advi {
    mt: 10px;
    .advi-section {
        fl: left;
        size: 246px 110px;
        mr: 11px;
        a {
            d: inline-block;
            size: 246px 110px;
            img {
                size: 246px 110px;
            }
        }
    }
}

.banner-right {
    fl: right;
    w: 198px;
    bg: #fff;
    bd: 1px solid #e6e6e6;
}

.login-action {
    ta: center;
    bdb: 1px solid #e6e6e6;
    h: 200px;
    box-sizing: border-box;
    w: 200px;
    d: table;


    .head-wrap {
        display: table-cell;
        vertical-align: middle;
    }
    .head {
        mb: 20px;
        lh: 1;
        img {
            border-radius: 50%;
            size: 63px 63px;
        }
    }
    .welcome {
        lh: 1;
        color: #666;
        mb: 12px;
    }
    .login-action-button {
        button {
            size: 61px 26px;
            border-radius: 15px;
            bd: 1px solid $bg;
            bg: #fff;
            c: $bg;
            cursor: pointer;
        }

        &:hover {
            opacity: .8;
            filter: alpha(opacity=80);
        }
        .bt-login {
            bg: $bg;
            c: #fff;
            mr: 5px;
        }
        .bt-register {
            bdc: $bg;
        }
    }
}


.login-slide {
    p: 18px 16px 6px;
    bdb: 1px solid #e6e6e6;
    .tab {
        bdb: 1px solid #efefef;
        mb: 13px;
        span {
            d: inline-block;
            lh: 20px;
            c: $bg;
            bdb: 2px solid $bg;
        }
    }

    .login-marquee {
        h: 84px;
        overflow: hidden;
        pos: relative;
        mb: 11px;
        li {
            mb: 12px;
            a {
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                c: #999;
                &:hover {
                    color: $bg;
                }
            }
        }
    }
}

.login-project {
    ta: center;
    dl {
        d: inline-block;
        cursor: pointer;
        c: #999;
        mr: 16px;
        pos: relative;
        &:hover {
            .ewm {
                display: block;
            }
        }
        dd {
            mt: 10px;
            .ewm {
                display: none;
                size: 109px 126px;
                bg: #fff;
                pos: absolute;
                t: -134px;
                ta: center;
                /*box-shadow: 1px 1px 20px #d1d0d0, 0px -1px 20px #d1d0d0;*/
                bd: 1px solid #e6e5e5;
                l: -30px;
                z-index: 22;


                img {
                    size: 80px 80px;

                    m: 14px 16px 0;
                }
                span {
                    lh: 30px;
                    pos: relative;
                    .icon-down-arrow {
                        pos: absolute;
                        b: -13px;
                        r: 33px;
                    }
                }
            }
        }
    }

    .mar0 {
        mt: -2px;
    }

    pt:19px;
    pb:19px;
}









































/*找钢指数*/

.index-zs {}




























/*广告位*/

.index-ad {
    height: 70px;
    pos: relative;
    mt: 10px;
    bd: 1px solid #f2f2f2;
    w: 1180px;
    .ad_slide {
        height: 70px;
        ofl: hidden;
        .swiper-slide {
            fl: left;
            size: 294px 70px;
            bg: #fff;
            line-height: 70px;
            text-align: center;
            pos: relative;
            a {
                display: inline-block;
                size: 294px 70px;
                img {
                    size: 294px 70px;
                }
            }

            .line {
                pos: absolute;
                size: 1px 31px;
                bg: #e6e6e6;
                r: 0;
                t: 20px;
            }
        }
    }

    .ad-prev,
    .ad-next {
        d: none;
    }
}






































/*找钢商城*/

.index-shop {
    clear: fix;
    /*h: 315px;*/
}

.shop-left {
    float: left;
    w: 300px;
    bg: #fff;
    h: 319px;
    bd: 1px solid #f2f2f2;
    bdr: 0;
    p: 0 20px;

    box-sizing: border-box;
    .shop-title {
        h: 47px;
        lh: 47px;
        c: #333;
        fz: 14px;
        fw: bold;
        bdb: 1px solid #ebebeb;
    }

    .slick {
        overflow: hidden;
        h: 256px;
        w: 259px;
        mt: 20px;

        .swiper-item {
            overflow: hidden;
            ta: left;
            w: 259px;
            p {
                pb: 20px;
                c: #666;
                span {
                    fl: left;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .name1 {
                    w: 58px;
                }
                .name2 {
                    w: 110px;
                }
                .text-red {
                    fl: right;
                }
                .time {
                    fl: right;
                    c: #999;
                }
            }
        }
    }
    .swiper-container {
        cursor: default;
    }
}

.shop-right {
    w: 847px;
    float: left;
    bg: #fff;
    h: 317px;
    bd: 1px solid #f2f2f2;
    p: 0 15px;
    overflow: hidden;
    table {
        w: 100%;
        c: #333;
        ta: center;
        thead {
            tr {
                bdb: 1px solid #e6e6e6;
            }
            th {
                fw: normal;
                c: #999;
                h: 47px;
                pl: 10px;
                box-sizing: border-box;
            }
        }
        tbody {
            tr {
                h: 45px;
                bdb: 1px dotted #ccc;
                cursor: pointer;
                &:hover {
                    bg: #fff1f1;
                }
                td {
                    pl: 10px;
                    box-sizing: border-box;
                    span {
                        display: block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                .td1 span {
                    w: 130px;
                }
                .td2 span {
                    w: 110px;
                }
                .td3 span {
                    w: 72px;
                }
                .td4 span {
                    w: 87px;
                }
                .td5 span {
                    w: 193px;
                }
                .td6 span {
                    w: 48px;
                }
                .td7 span {
                    w: 69px;
                }
                .td8 span {
                    w: 76px;
                }
            }
            .last {
                bdb: 0;
            }
        }
    }
}





































/*找钢撮合*/

.index-ch {
    clear: fix;
    mb: 10px;
    /*h: 315px;*/
}

.ch-left {
    float: left;
    w: 300px;
    bg: #fff;
    h: 348px;
    bd: 1px solid #f2f2f2;

    box-sizing: border-box;
    .ch-dl-wrap {
        .dl-top {
            bdb: 1px solid #f2f2f2;
            clear: fix;
            p: 15px 0 15px 0;
            dl {
                 ta:center;
                dt {
                    color: #333;
                    h: 25px;
                }
                dd {
                    c: #999;
                    b {
                        fz: 24px;
                        fw: normal;
                    }
                }
            }
            .dl-left {
                fl: left;
                w: 149px;

            }
            .dl-right {
                w:149px;
                fl: left;
              
            }
        }
    }

    .step-wrap {
        .step-top {
            clear: fix;

            p: 14px 30px 0;
            dl {
                fl: left;
                w: 95px;
                dt {
                    mb: 12px;
                    pos: relative;
                    pl: 12px;
                    .icon-load {
                        pos: absolute;
                        l: 54px;
                        t: 3px;
                    }
                }
                dd {}
            }
            .dl-last {
                fl: right;
                w: auto;
                mt: -1px;
            }
        }
    }

    .action {
        mt: 20px;
        ta: center;
        a {
            d: inline-block;
            size: 93px 26px;
            bg: #ff7575;
            c: #fff;
            ta: center;
            lh: 26px;
            border-radius: 26px;
            mr: 5px;
            text-decoration: none;
            &:hover {
                opacity: .8;
                filter: alpha(opacity=80);
            }
        }
    }
}

.ch-right {
    w: 867px;
    fl: left;
    h: 348px;
    /*h: 315px;*/
    /*bd: 1px solid #f2f2f2;*/
    m: 0 0 0 13px;
    box-sizing: border-box;

    .ch_slide {
        h: 348px;
        pos: relative;
        ofl: hidden;
        ul {
            ofl: hidden;
            ta: left;
        }
        li {
            fl: left;
            bg: #fff;
            mr: 14px;
            mb: 10px;
            bd: 1px solid #f2f2f2;
            pos: relative;
            size: 278px 109px;
            box-sizing: border-box;
            p: 21px 7px 20px 15px;
            cursor: pointer;
            transition: transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease;
            &:hover {
                transform: translateY(-5px);
            }
            .title {
                h: 22px;
                c: #333;
                fz: 14px;
                /*pr:50px;*/
                ofl: hidden;
                white-space: nowrap;
                w: 201px;
                box-sizing: border-box;
                text-overflow: ellipsis;
            }
            .time {
                h: 35px;
                c: #999;
                .time-before {
                    ml: 10px;
                }
            }
            .infor {
                pos: relative;
                c: #999;
                p {
                    fl: left;
                    span {
                        m: 0 5px;
                    }
                }
                .company {
                    w: 105px;
                    mr: 10px;

                    white-space: nowrap;
                    overflow: hidden;

                    text-overflow: ellipsis;
                }
                .loaction {
                    w: 138px;

                    white-space: nowrap;
                    overflow: hidden;

                    text-overflow: ellipsis;
                }
                .icon-top-arrow {
                    pos: absolute;
                    t: -6px;
                    l: 13px;
                }
            }
            .icon-compare-finish,
            .icon-compare {
                pos: absolute;
                lh: 24px;
                c: #fff;
                ta: center;
                t: 14px;
                r: -6px;
                fs: normal;
            }
        }
    }
    .ch-right-prev,
    .ch-right-next {
        d: none;
    }
}

































/*服务评级*/

.index-rank {
    bg: #fff;
    h: 296px;
    bd: 1px solid #f2f2f2;
    mb:10px;
    .public-title {
        h: 46px;
        bdb: 1px solid #f2f2f2;
        lh: 46px;
        pos: relative;
        .title-heading {
            pl: 71px;
            fz: 14px;

            .icon-prize {

                pos: absolute;
                t: 0;
                l: 25px;
            }
        }
        .title-tab {
            li {
                h: 36px;

                lh: 45px;
            }
        }
    }

    .rank-wrap {
        clear: fix;
        pl: 44px;
        .rank-table {
            fl: left;
            w: 246px;
            mr: 40px;
            box-sizing: border-box;
            table {
                w: 100%;
                c: #333;
                ta: left;
                th {
                    h: 50px;
                    c: #999;
                    fw: normal;
                    ta: left;
                }
                tbody {
                    tr {
                        h: 38px;
                        td {
                            span {
                                d: inline-block;
                                w: 132px;
                                white-space: nowrap;
                                overflow: hidden;
                            }
                        }
                    }
                }
            }
        }
    }
}

























/*推荐卖家*/

.index-recommend {
    mb: 10px;
}

.index-recommend li {
    bg: #fff;
    mb: 10px;
    bd: 1px solid #f2f2f2;
    overflow: hidden;
    p {
        fl: left;
        size: 196px 70px;
        line-height: 70px;
        text-align: center;
        position: relative;
        bg: #fff;
        /* img {
            va: middle;
        }*/
        a {
            display: inline-block;
            size: 196px 70px;
            img {
                size: 196px 70px;
            }
        }
        .line {
            position: absolute;
            width: 1px;
            height: 31px;
            background: #e6e6e6;
            right: 0;
            top: 20px;
        }
    }
}

.recommend-ad {
    overflow: hidden;
    .section {
        fl: left;
        size: 386px 220px;
        bg: #fff;
        mr: 10px;
        a {
            display: inline-block;
            size: 386px 220px;
            img {
                size: 386px 220px;
            }
        }
    }
}